<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/> <link rel="stylesheet" href="../style/weui2.css"/>
      <script src="../zepto.min.js"></script>
<script>
$(function(){
	$(document).on('tap','.weui_btn',function(){
		var ani = $(this).data('ani');
		$(this).animate(ani);
	})
		$(document).on('tap','#dh',function(){
		
		$(this).fadeOut();
	})
	
$("img").attr("src","");

})
</script>
</head>

<body ontouchstart>
<div class='p'>.ani-开头 .fadeIn .fadeOut没有</div>
         <div id="ani" class="p">
<button data-ani="ani-lg" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">逐渐放大ani-lg</button>
<button data-ani="ani-sm" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">逐渐缩小sm</button>
<button data-ani="ani-fade" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">淡入fade</button>
<button data-ani="ani-top" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">顶部滑入top</button>
<button data-ani="ani-right" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">右边滑入right</button>
<button data-ani="ani-bottom" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">底部滑入bottom</button>
<button data-ani="ani-left" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">左边滑入left</button>
<button data-ani="ani-shake" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">左右摇动shake</button>
<button data-ani="ani-circle" class="weui_btn  weui_btn_mini weui_btn_primary   f-white ani-circle">旋转circle</button>
<button data-ani="ani-circle" class="weui_btn  weui_btn_mini weui_btn_primary   f-white ani-rev ani-circle">反向rev</button>
<button data-ani="fadeIn" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">淡入用于显示fadeIn</button>
<button data-ani="fadeOut" class="weui_btn  weui_btn_mini weui_btn_primary   f-white">淡出 用于隐藏fadeOut</button>
</div>

<div class='p'>img-border img-resp
<img src="" class="img-border img-resp " />
</div>
<div class='p'>img-border   >img-resp
<a href="javascript:void(0);" class="img-border"><img src="" class=" img-resp"/></a>
</div>

<div class='p'>img-border img-radius img-resp
<img src="" class="img-border img-radius img-resp"/>
</div>

<div class='p'>img-radius img-resp
<img src="" class=" img-radius img-resp"/>
</div>

<div class='p'>.img-circle
<img src="" class=" img-circle " width='100' height='100'/>.img-circle .ani-circle
<img src="" class=" img-circle ani-circle" width='100' height='100'/>
.xz360
<img src="" class="xz360 " width='100' height='100'/>.circle
<img src="" class="circle " width='55' height='55'/>.blur
<img src="" class="blur " width='100' height='100'/>radius-lg
<img src="" class="radius-lg " width='100' height='100'/>radius-md
<img src="" class="radius-md " width='100' height='100'/>radius-sm
<img src="" class="radius-sm " width='100' height='100'/>radius
<img src="" class="radius " width='100' height='100'/>
.dh
<img src="" class=" " width='100' height='100' id='dh'/>
</div>
<div class='p'>渐变.jb
<div style="width:100px;height:100px;" class="jb"></div>
边框阴影.bs
<div style="width:100px;height:100px;" class="bs"></div>
opacity半透明 opacity01  0.1透明  opacity0全透明  opacity1不透明
<img src="" class="opacity0 " width='100' height='100'/>
<img src="" class="opacity01 " width='100' height='100'/>
<img src="" class="opacity " width='100' height='100'/>
<img src="" class="opacity1 " width='100' height='100'/>
<div style="height:100px;" class="ts f40">白日依山尽</div>

</div>




<div class="p">

<div class="m-box" >
 <div class="m-img" style="background-image:url(http://7xr193.com1.z0.glb.clouddn.com/4.jpg);"></div>
   <div class="m-masker"> 
   <div class="m-title" > 洗颜新潮流！人气洁面皂排行榜 <br> <span class="m-time">2016-03-18</span> 
   </div>
    </div> 
    </div>

</div>



</body>
</html>
